import React, {useEffect, useRef} from 'react';
import {useState} from "react";

function FormInput(props) {
    const inputRef = useRef()
    // update hook
    useEffect(()=>{
        if (props.clearFlag) {
            inputRef.current.value=""
        }
    })

    return (
        <div className="row">
            <label>{props.description}</label>
            <input ref={inputRef} onChange={(e) => setUserNameAndPwd(e)} type={props.type} placeholder={props.placeholder}>

            </input>
        </div>
    );
    function setUserNameAndPwd(e) {
        let value = e.target.value;
        if (!value.trim()) {
            inputRef.current.value = ""
        }
        if (props.type === 'text') {
            props.changeUsername(value)
        }else {
            props.changePassword(value)
        }

    }
}

export default FormInput;
